<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>timeCat 类型平移</title>
  <link rel="stylesheet" href="./assets/common.css">
</head>
<body>
<div>
  <canvas id="mountNode"></canvas>
  <p>手机上体验效果更佳</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script src="https://gw.alipayobjects.com/os/rmsportal/NjNldKHIVQRozfbAOJUW.js"></script>
<script>
function formatNumber(n) {
  return String(Math.floor(n * 100) / 100).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

$.getJSON('./data/steps.json', function(data) {
  const originDates = [];
  const originSteps = [];
  const firstDayArr = [];
  data.forEach(obj => {
    if (obj.date >= '2018-05-01') {
      originDates.push(obj.date);
      originSteps.push(obj.steps);
    }

    if (obj.first) {
      firstDayArr.push(obj);
    }
  });

  const chart = new F2.Chart({
    id: 'mountNode',
    pixelRatio: window.devicePixelRatio
  });

  chart.source(data, {
    date: {
      type: 'timeCat',
      tickCount: 5,
      values: originDates,
      mask: 'MM-DD'
    },
    steps: {
      tickInterval: 5000,
      min: Math.min.apply(null, originSteps),
      max: Math.max.apply(null, originSteps)
    }
  });

  chart.axis('date', {
    tickLine: {
      length: 4,
      stroke: '#cacaca'
    },
    label: {
      fill: '#cacaca'
    },
    line: {
      top: true
    }
  });
  chart.axis('steps', {
    position: 'right',
    label(text) {
      return {
        text: formatNumber(text * 1),
        fill: '#cacaca'
      };
    },
    grid: {
      stroke: '#d1d1d1'
    }
  });
  chart.tooltip({
    showItemMarker: false,
    background: {
      radius: 2,
      fill: '#FF5842',
      padding: [3, 5]
    },
    onShow(ev) {
      const items = ev.items;
      items[0].name = '';
      items[0].value = items[0].value + ' 步';
    }
  });
  chart.interval().position('date*steps').color('#FF5842').style({
    radius: [ 2, 2, 0, 0 ]
  });

  firstDayArr.forEach(obj => {
    chart.guide().line({
      top: false,
      start: [ obj.date, 'min' ],
      end: [ obj.date, 'max' ],
      style: {
        lineWidth: 1,
        stroke: '#A4A4A4'
      }
    });
    chart.guide().text({
      position: [ obj.date, 'min' ],
      content: moment(obj.date).format('YYYY-MM'),
      style: {
        textAlign: 'start',
        fill: '#cacaca',
        textBaseline: 'top'
      },
      offsetY: 20
    });
  });
  chart.scrollBar({
    mode: 'x',
    xStyle: {
      backgroundColor: '#e8e8e8',
      fillerColor: '#808080',
      offsetY: -2
    }
  });
  chart.interaction('pan', {
    mode: 'x',
    // onProcess(e) {
    //   const center = e.center;
    //   const position = F2.Util.getRelativePosition(center, chart.get('canvas'));
    //   chart.showTooltip(position);
    // },
    onEnd: () => {
      const xScale = chart.getXScale();
      // timeCat 类型
      const source = chart.get('data');
      const yValues = [];
      source.map(obj => {
        const xValue = obj.date;
        if (xScale.translate(xValue) >= 0) {
          yValues.push(obj.steps);
        }
      });

      if (yValues.length) {
        const yMin = Math.min.apply(null, yValues);
        const yMax = Math.max.apply(null, yValues);

        chart.scale('steps', {
          min: yMin,
          max: yMax,
          tickInterval: 5000
        });
        chart.repaint();
      }
    }
  });
  chart.render();
});
</script>
</body>
</html>
